import {useEffect,useRef} from 'react'
const {remote} = window.require("electron")
const {Menu,MenuItem} = remote;//import menu

const useContextMenu = (itemArr,targetSelector)=>{
  let clickEle = useRef(null)
  useEffect(()=>{
    const menu = new Menu()
    itemArr.forEach(item =>{
       menu.append(new MenuItem(item))
    })

    const handleContextMenu = (e)=>{
      //判断某个标签是否在某个标签里面
      if(document.querySelector(targetSelector).contains(e.target)){
          clickEle.current = e.target
          // menu.popup({window:remote.getCurrentWindow()})
          menu.popup()
      }
    }
    window.addEventListener('contextmenu',handleContextMenu)
    return ()=>{
      window.removeEventListener("contextmenu",handleContextMenu)
    }
  })
  return clickEle
}

export default useContextMenu
